<!DOCTYPE html>
<html>
<head>
  <meta charset=" utf-8">
  <meta name="author" content="http://www.softwhy.com/" />
  <title>蚂蚁部落</title>
  <style>
    .overimg{
      position: relative;
      display: block;
       overflow: hidden;
      box-shadow: 0 0 10px #FFF;
    }
    .light{
      cursor:pointer;
      position: absolute;
      left: -627px;
      top: 0;
      width: 627px;
      height: 90px;
      background-image:-moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
      background-image:-webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
      transform: skew(-25deg);
      -o-transform: skew(-25deg);
      -moz-transform: skew(-25deg);
      -webkit-transform: skew(-25deg);
    }
    .overimg:hover .light{
      left:0px;
      -moz-transition:0.5s;
      -o-transition:0.5s;
      -webkit-transition:0.5s;
      transition:0.5s;
    }
  </style>
</head>
<body>
<p class="overimg">
  <a><img src="http://img.kiwipeach.cn/9e2c2bd31b43d7d7cbddc10b608ea8f6.png"></a>
  <i class="light"></i>
</p>
</body>
</html>